<template>
  <div>
    <left-side>
      <chart-2 title="资产使用率" :image="require('@/assets/images/能源1.png')">
        <pie-chart chartId="assetsUsageRate" :datas="assetsUsageRate" :names="['已使用', '未使用']" :unit="['%', '%']" style="margin-top:10%">
          <div id="Assetsliquidfill"></div>
        </pie-chart>
      </chart-2>
      <chart-2 title="资产监控率" :image="require('@/assets/images/电 .png')">
        <div id="AssetsMonitorRate1"></div>
        <div id="AssetsMonitorRate2"></div>
      </chart-2>
      <chart-2 title="安装标签资产统计" :image="require('@/assets/images/水 .png')">
        <div id="installLabel"></div>
      </chart-2>
      <chart-2 title="告警状态处理统计" :image="require('@/assets/images/燃气 .png')">
        <div id="warnState"></div>
      </chart-2>
    </left-side>
    <infor-pan />
    <right-side>
      <chart-2 title="资产使用情况"><div id="assetsUsage"></div></chart-2>
      <chart-2 title="资产闲置数据"><idle-asset-state/> </chart-2>
      <chart-2 title="资产损坏数据"><div id="damagedAssets"></div> </chart-2>
    </right-side>
  </div>
</template>

<script>
import Chart2 from '../components/chart2.vue'
import LeftSide from '../components/index/leftSide.vue'
import RightSide from '../components/index/rightSide.vue'
import PieChart from '../components/pieChart.vue'

import 'echarts-liquidfill'
import * as echarts from 'echarts'
import InforPan from '../components/assetsManage/inforPan.vue'
import IdleAssetState from '../components/assetsManage/IdleAssetState.vue'

export default {
  components: {
    LeftSide,
    RightSide,
    Chart2,
    PieChart,
    InforPan,
    IdleAssetState//资产闲置数据
  },
  data() {
    return {
      assetsUsageRate: [25, 75],//资产使用率
      AssetsMonitorRate1: 60,//资产监控率
      installLabel: { 类型01: 0.38, 类型02: 0.56, 类型03: 0.9, 类型04: 0.69, 类型05: 0.8, 类型06: 0.8, 类型07: 0.52 },//安装标签资产统计
      warnState: { 已完成: 150, 处理中: 296, 未处理: 130 },//告警状态处理统计
      assetsUsage: { 物联01: 1233, 视频02: 906, 消防03: 1309, 治安04: 1058, 能源05: 1109, 安防06: 966, 电力07: 799, 物业08: 1286, 电力09: 900, 物联10: 1286 },//知产使用情况
      damagedAssets:[{name:'资产01',data:26},{name:'资产01',data:45},{name:'资产01',data:128},{name:'资产01',data:45},{name:'资产01',data:76},{name:'资产01',data:40},]//资产损坏数据
    }
  },
  mounted() {
    document.querySelectorAll('.rightSide>.chartCard').forEach(ele => {
      ele.firstChild.style.height = '10%'
      ele.lastChild.style.height = '90%'
    })

    //#region 渲染资产使用率能量球
    var chartDom = document.getElementById('Assetsliquidfill')
    var myChart = echarts.init(chartDom)
    var option = {
      series: [
        {
          type: 'liquidFill',
          data: [this.assetsUsageRate[0] / 100],
          color: ['#0F8BD8'],
          radius: '60%',
          outline: {
            show: false
          },
          label: {
            fontSize: 18,
            fontStyle: 'normal',
            color: '#fff',
            fontWeight: '550'
          },
          backgroundStyle: {
            color: '#104C787f'
          }
        }
      ]
    }
    option && myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
    //#endregion

    //#region 进度条的初始option
    let progressOpt = {
      title: {
        text: '已监控',
        left: 'center',
        top: '55%',
        textStyle: {
          color: '#ddd',
          fontWeight: '500'
        }
      },
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 100,
          radius: '60%',
          splitNumber: 100,
          itemStyle: {
            color: '#58D9F9',
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          progress: {
            show: true,
            width: -10,
            itemStyle: {
              color: '#00deff'
            }
          },
          pointer: { show: false },
          axisLine: {
            lineStyle: {
              width: -2
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          detail: {
            formatter: '{value}%',
            color: '#00deff',
            offsetCenter: ['0', '-10']
          },
          title: { show: false },
          data: [
            {
              value: 60,
              name: 'Percent'
            }
          ]
        }
      ]
    }
    //#endregion

    //#region 渲染资产监控进度条
    let AssetsMonitorRate1Dom = document.getElementById('AssetsMonitorRate1')
    let AssetsMonitorRate1Chart = echarts.init(AssetsMonitorRate1Dom)
    progressOpt.series[0].data[0].value = this.AssetsMonitorRate1
    AssetsMonitorRate1Chart.setOption(progressOpt)

    let AssetsMonitorRate2Dom = document.getElementById('AssetsMonitorRate2')
    let AssetsMonitorRate2Chart = echarts.init(AssetsMonitorRate2Dom)
    progressOpt.series[0].data[0].value = 100 - this.AssetsMonitorRate1
    progressOpt.title.text = '未监控'
    progressOpt.series[0].progress.itemStyle.color = '#FFBD51'
    progressOpt.series[0].detail.color = '#FFBD51'
    AssetsMonitorRate2Chart.setOption(progressOpt)

    window.addEventListener('resize', () => {
      AssetsMonitorRate1Chart.resize()
      AssetsMonitorRate2Chart.resize()
    })
    //#endregion

    //#region 渲染安装标签统计
    let installLabelDom = document.getElementById('installLabel')
    let installLabelChart = echarts.init(installLabelDom)
    let installLabelOption = {
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: Object.keys(this.installLabel),
          axisLabel: {
            color: '#ffffff'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: '#ffffff'
          },
          splitLine: { show: true, lineStyle: { type: 'dashed' } }
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        backgroundColor: 'rgba(0,0,0,0.7)',
        borderColor: 'rgba(0,0,0,0.7)',
        textStyle: {
          color: '#ffffff'
        }
      },
      series: [
        {
          type: 'bar',
          barWidth: '60%',
          data: Object.values(this.installLabel),
          itemStyle: {
            barBorderRadius: [2, 2, 0, 0], //柱体圆角
            color: new echarts.graphic.LinearGradient(
              //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
              //通过修改前4个参数，可以实现不同的渐变方向
              /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
              0,
              0,
              0,
              1,
              [
                {
                  //代表渐变色从正上方开始
                  offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                  color: '#005BEA'
                }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: '#00C6FB'
                }
              ]
            )
          }
        }
      ]
    }

    installLabelChart.setOption(installLabelOption)
    window.addEventListener('resize', () => {
      installLabelChart.resize()
    })
    //#endregion

    //#region 渲染告警状态处理统计
    let warnStateDom = document.getElementById('warnState')
    let warnStateChart = echarts.init(warnStateDom)
    let warnStateOption = Object.assign(installLabelOption, {
      xAxis: [
        {
          type: 'category',
          data: Object.keys(this.warnState),
          axisLabel: {
            color: '#ffffff'
          }
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '60%',
          data: Object.values(this.warnState)
        }
      ]
    })
    warnStateChart.setOption(warnStateOption)
    window.addEventListener('resize', () => {
      warnStateChart.resize()
    })
    //#endregion

    //#region 渲染资产使用情况
    let assetsUsageDom = document.getElementById('assetsUsage')
    let assetsUsageChart = echarts.init(assetsUsageDom)
    let assetsUsageOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        backgroundColor: 'rgba(0,0,0,0.7)',
        borderColor: 'rgba(0,0,0,0.7)',
        textStyle: {
          color: '#ffffff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '5%',
        top:'5%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisLabel: { show: false },
          lineStyle: { color:'#fff'  },
          splitLine: { show: true, lineStyle: { type: 'dashed',color:'#999'  }},
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: Object.keys(this.assetsUsage),
          axisLabel:{color:'#fff'}
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '40%',
          data: Object.values(this.assetsUsage),
          itemStyle:{
            barBorderRadius:[0,5,5,0],
            color:'#0ED2A6'
          }
        }
      ]
    }
    assetsUsageChart.setOption(assetsUsageOption);
    window.addEventListener('resize',()=>assetsUsageChart.resize());
    //#endregion

    //#region 渲染资产损坏数据
    let damagedAssetsDom=document.getElementById('damagedAssets');
    let damagedAssetsChart=echarts.init(damagedAssetsDom)
    var maxData = 150;
    let yAxisData=this.damagedAssets.map(a=>a.name);
    let data=this.damagedAssets.map(a=>a.data);
      //#region 图片
    var spirit = 'image://';

      //#endregion
    let damagedAssetsOption= {
    tooltip: {
    },
    xAxis: {
        max: maxData,
        splitLine: {show: false},
        offset: 10,
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisLabel: {
            margin: 10
        }
    },
    yAxis: {
        data: yAxisData,
        inverse: true,
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            margin: 10,
            color: '#999',
            fontSize: 16
        }
    },
    grid: {
        top: 'center',
        height: 200,
        left: 70,
        right: 100
    },
    series: [{
        // current data
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: data,
        z: 10
    }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.2
            }
        },
        label: {
            show: true,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: 'right',
            offset: [10, 0],
            color: '#00deff',
            fontSize: 18,
            opacity: 1
        },

        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: data,
        z: 5
    }]
};
    damagedAssetsChart.setOption(damagedAssetsOption);
    window.addEventListener('resize',()=>assetsUsageChart.resize())
    //#endregion
  }
}
</script>

<style scoped>
#Assetsliquidfill {
  background: url('../assets/images/旋转.png') no-repeat 0 0;
  background-position: center center;
  background-size: calc(60% + 5px);
  width: 100%;
  height: 90%;
}

.rightSide > .chartCard {
  height: 33%;
}
#AssetsMonitorRate1,
#AssetsMonitorRate2 {
  background: url('../assets/images/形状 2801.png') no-repeat center center;
  background-size: 50%;
  width: 50%;
  display: inline-block;
}
</style>
